<template>
  <div class="aside-menu-wrapper" :class="{'expand': !isFolder}" style="background-color:#f7f7f7;">
    <el-menu
      class="aside-menu"
      :default-openeds="[0]"
      :default-active="activeIndex"
      @select="handleSelect"
      style="background-color: #f7f7f7;"
    >
      <el-menu-item index="0">
        <i class="el-icon-menu" title="全部"></i>
        <span slot="title" v-show="!isFolder">全部</span>
      </el-menu-item>
      <el-menu-item index="1" title="图片">
        <i class="el-icon-picture"></i>
        <span slot="title" v-show="!isFolder">图片</span>
      </el-menu-item>
      <el-menu-item index="2" title="文档">
        <i class="el-icon-document"></i>
        <span slot="title" v-show="!isFolder">文档</span>
      </el-menu-item>
      <el-menu-item index="3" title="视频">
        <i class="el-icon-video-camera"></i>
        <span slot="title" v-show="!isFolder">视频</span>
      </el-menu-item>
      <el-menu-item index="4" title="音乐">
        <i class="el-icon-headset"></i>
        <span slot="title" v-show="!isFolder">音乐</span>
      </el-menu-item>
      <el-menu-item index="5" title="其他">
        <i class="el-icon-takeaway-box"></i>
        <span slot="title" v-show="!isFolder">其他</span>
      </el-menu-item>
      <el-menu-item index="6" title="回收站" disabled="">
        <i class="el-icon-delete"></i>
        <span slot="title" v-show="!isFolder">回收站</span>
      </el-menu-item>
    </el-menu>
    <div style="position: fixed;left: 25px;bottom: 30px;">
      <div style="width: 150px;">
        <el-progress :percentage="getStorePercentage()" :show-text="false" stroke-width=8 color="#1caffd"></el-progress>
        <p style="font-size:13px;color:#666666;margin-top: 10px;margin-left: 5px;">{{storageValue.used}}/{{storageValue.total}}</p>
      </div>
    </div>
  </div>
</template>

<script>
// import { selectFileByFileType } from '@/request/file.js'
import { getstorage } from '@/request/file.js'

export default {
  name: 'AsideMenu',
  data() {
    return {
      fileListByFiletype: [],
      storageValue: {
        total: '',
        totalValue: 0,
        used: '',
        usedValue: 0
      }
    }
  },
  computed: {
    //  当前活跃菜单项index，也是当前被选中的文件类型
    activeIndex: {
      get() {
        return String(this.$route.query.filetype)
      },
      set() {
        return '0'
      }
    },
    //  判断当前用户设置的左侧栏是否折叠
    isFolder() {
      return false
    }
  },
  created() {
    this.showStorage()
  },
  methods: {
    getStorePercentage() {
      return Math.round(this.storageValue.usedValue * 100 /this.storageValue.totalValue) 
    },
    //  导航菜单项点击事件
    handleSelect(index) {
      this.$router.push({
        path: '/file',
        query: { filepath: '/', filetype: index }
      })
    },
    showStorage() {
      getstorage().then(res => {
        if (res.code == 200) {
          let totalSize = res.data.total ? res.data.total : 0
          let usedSize = res.data.used ? res.data.used : 0
          this.storageValue.totalValue = totalSize
          this.storageValue.usedValue = usedSize
          const B = 1024
          const KB = Math.pow(1024, 2)
          const MB = Math.pow(1024, 3)
          const GB = Math.pow(1024, 4)
          if (totalSize == null) {
            this.storageValue.total = 0 + 'KB'
          } else if (totalSize < KB) {
            this.storageValue.total = (totalSize / B).toFixed(0) + 'KB'
          } else if (totalSize < MB) {
            this.storageValue.total = (totalSize / KB).toFixed(2) + 'MB'
          } else if (totalSize < GB) {
            this.storageValue.total = (totalSize / MB).toFixed(3) + 'GB'
          } else {
            this.storageValue.total = (totalSize / GB).toFixed(4) + 'TB'
          }
          if (!usedSize) {
            this.storageValue.used = 0 + 'KB'
          } else if (usedSize < KB) {
            this.storageValue.used = (usedSize / B).toFixed(0) + 'KB'
          } else if (usedSize < MB) {
            this.storageValue.used = (usedSize / KB).toFixed(2) + 'MB'
          } else if (usedSize < GB) {
            this.storageValue.used = (usedSize / MB).toFixed(3) + 'GB'
          } else {
            this.storageValue.used = (usedSize / GB).toFixed(4) + 'TB'
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.aside-menu-wrapper
  /* background-color #f7f7f7 */
  width 60px
  transition width 0.5s
  -webkit-transition width 0.5s
  
  >>> .el-menu
    border none
    .el-menu-item.is-active
      background #eaeaea
.expand
  width 201px
  >>> .el-menu
    .el-menu-item
      padding-left 40px !important
</style>